import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootAction, RootState } from '@/types/store'
import { differenceBy } from 'lodash'
import {
  addChannelActionCreate,
  delChannelActionCreate,
} from '@/store/actions/home'
import { useState } from 'react'
import { Toast } from 'antd-mobile'

type ChannelsType = {
  onClose: () => void
}

const Channels = ({ onClose }: ChannelsType) => {
  const dispatch = useDispatch()
  // todo 获取仓库中的数据 用户自己的数据
  const { userChannels } = useSelector((state: RootState) => {
    return state.home
  })

  // todo 所有的频道数据
  const allchannels = useSelector((state: RootState) => {
    return state.home.allChannels
  })

  // todo 推荐频道信息 = 所有频道 - 用户自己的频道
  // 方式一:
  // const recomChannels = allchannels.filter((item) => {
  //   // 回调的返回值位true 表示要留下来
  //   // 留下来的 item 他的 item.id 在 userChannels 中应该找不到
  //   const index = userChannels.findIndex((v) => v.id === item.id)
  //   // console.log('这个里面是啥', userChannels[index])

  //   // 如果index === -1 表示item这一项它在userChannels找不到 => 被留下来
  //   // 如果index === 7 表示itme这一项能找得到 => 不被留下来
  //   return index === -1
  // })

  // 方式二:
  const recomChannels = differenceBy(allchannels, userChannels, 'id')

  // todo 获取高亮id
  const activeId = useSelector((state: RootState) => state.home.activeId)

  // todo 控制编辑显
  const [isEdit, setIsEdit] = useState(false) // 控制编辑的状态

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon name="iconbtn_channel_close" onClick={onClose} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span
              className="channel-item-edit"
              onClick={() => setIsEdit(!isEdit)}
            >
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时, 添加类名, selected */}

            {userChannels.map((item) => (
              <span
                className={classnames('channel-list-item', {
                  selected: item.id === activeId,
                })}
                key={item.id}
                onClick={() => {
                  // 编辑状态中 下面的点击事件不生效
                  if (isEdit) return

                  console.log('点击了', item.id)

                  // 点谁谁亮
                  dispatch({
                    type: 'home/set_active_id',
                    payload: item.id,
                  } as RootAction)

                  // 关闭弹层
                  onClose?.()
                }}
              >
                {item.name}
                <Icon
                  name="iconbtn_tag_close"
                  onClick={() => {
                    //判断当前编辑状态
                    if (isEdit) {
                      // 编辑中...
                      // 1. 限制要求, 我的频道至少保留四个
                      if (userChannels.length <= 4) {
                        Toast.show('常用平道数量不能少于4个...')
                        return
                      }

                      // 2. 可以发请求
                      dispatch(delChannelActionCreate(item.id))

                      // 3. 如果删除的是当前高亮的频道, 处理一下高亮
                      if (item.id === activeId) {
                        // 更新成用户频道第一个作为高亮项
                        dispatch({
                          type: 'home/set_active_id',
                          payload: userChannels[0].id,
                        } as RootAction)
                      }
                    }
                  }}
                />
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recomChannels.map((item) => (
              <span
                className="channel-list-item"
                key={item.id}
                onClick={() => {
                  // 将当前点击的频道, 通过请求接口, 添加到我的频道
                  dispatch(addChannelActionCreate(item))
                }}
              >
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
